<template>
  <div>
    <el-card class="box-card"
      ><Category :flag="isSpuShow" @categoryIdInfo="categoryIdInfo"></Category
    ></el-card>
    <!-- 底部这里将来是有三部分进行切换 -->
    <el-card class="box-card" v-show="scene == 1">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-bottom: 10px"
        @click="addOrUpDataSpu"
        :disabled="categoryId.category3Id ? false : true"
        >添加SPU</el-button
      >
      <el-table :data="spuData.records" border style="width: 100%">
        <el-table-column type="index" label="序号" width="200" align="center">
        </el-table-column>
        <el-table-column
          prop="spuName"
          label="spu名称"
          width="width"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="description"
          label="spu描述"
          width="width"
        ></el-table-column
        ><el-table-column prop="" label="操作" width="width" align="center"
          ><template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="增加"
              placement="bottom"
            >
              <el-button
                size="mini"
                icon="el-icon-plus"
                type="success"
                @click="addSku(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="bottom"
            >
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="warning"
                @click="addOrUpDataSpu(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="sku信息"
              placement="bottom"
            >
              <el-button
                size="mini"
                icon="el-icon-info"
                type="info"
                @click="skuHandle(row)"
              ></el-button>
            </el-tooltip>
            <el-popconfirm
              :title="`删除${row.spuName}`"
              @onConfirm="deleteSpu(row)"
            >
              <template #reference>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <el-button
                    size="mini"
                    icon="el-icon-delete"
                    type="danger"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          style="margin-top: 10px"
          align="center"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->, sizes,total"
          :total="spuData.total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-card class="box-card" v-show="scene == 2">
      <SpuForm ref="spuForm" @changeScene="changeScene"></SpuForm>
    </el-card>
    <el-card class="box-card" v-show="scene == 3">
      <SkuForm ref="skuForm" @changeScene="changeScene"></SkuForm>
    </el-card>
    <el-dialog
      :title="`${dialogTitle}的sku信息`"
      :visible.sync="dialogTableVisible"
      :before-close="handleClose"
    >
      <el-table
        v-loading="loading"
        :data="skuMessageList"
        border
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column property="skuName" label="商品名字"></el-table-column>
        <el-table-column property="price" label="价格"></el-table-column>
        <el-table-column label="图片" header-align="left"
          ><template slot-scope="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              style="width: 100px; height: 100px" /></template
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from './SpuForm/index.vue'
import SkuForm from './SkuForm/inde.vue'
export default {
  name: 'Spu',
  components: { SpuForm, SkuForm },
  data() {
    return {
      scene: 1, // 1:spu列表 2:添加或修改spu 3:
      // 非展示spu列表数据时，不可用
      isSpuShow: true,
      // 商品分类id
      categoryId: { category1Id: '', category2Id: '', category3Id: '' },
      currentPage: 1, // 当前页码
      limit: 3, // 每页记录数
      spuData: {}, // 分页器显示的spu数据
      // sku信息
      skuMessageList: [],
      // 对话框
      dialogTableVisible: false,
      dialogTitle: '',
      // 加载flag
      loading: true
    }
  },
  methods: {
    id(id) {
      console.log('测试' + id)
    },
    // 子组件回调函数 获取categoryId
    categoryIdInfo(id) {
      this.categoryId = id
      // 获取到categoryId后，请求分页器列表
      this.getSpuList()
    },
    // 请求分页器spu列表
    async getSpuList() {
      // 整理请求需要的参数
      const product = {
        page: this.currentPage,
        limit: this.limit,
        category3Id: this.categoryId.category3Id
      }
      const result = await this.$api.spu.reqProductSpu(product)
      if (result.code === 200) {
        this.spuData = result.data
      }
      // 回到spu管理主页时，Category组件里的数据可以改变
      this.isSpuShow = true
    },
    // currentPage 改变时会触发
    handleCurrentChange(index) {
      this.currentPage = index
      // 重新请求分页器spu列表
      this.getSpuList()
    },
    // pageSize 改变时会触发
    handleSizeChange(index) {
      this.limit = index
      // 重新请求分页器spu列表
      this.getSpuList()
    },
    addOrUpDataSpu(row) {
      // 显示子组件 spuFrom
      this.scene = 2
      // 把Category组件里的数据不发变更
      this.isSpuShow = false
      // 调用子组件的函数
      if (row.id) {
        // 有id为修改页面
        this.$refs.spuForm.getSpuProperty(this.categoryId.category3Id, row.id)
      } else {
        // 无id为新增页面
        this.$refs.spuForm.getSpuProperty(this.categoryId.category3Id)
      }
    },
    // 子组件修改父组件场景
    changeScene(scene) {
      this.scene = scene
      this.getSpuList()
    },
    // 删除spu
    async deleteSpu(row) {
      const result = await this.$api.spu.reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.getSpuList()
      } else {
        this.$message.warning('请求失败')
      }
    },
    // 增加sku
    async addSku(row) {
      // 显示增加sku数据页面
      this.scene = 3
      // 把Category组件里的数据不发变更
      this.isSpuShow = false
      // 调用skuForm子组件函数
      this.$refs.skuForm.getData(
        this.categoryId.category1Id,
        this.categoryId.category2Id,
        row
      )
    },
    // sku信息按钮回调
    async skuHandle(row) {
      this.dialogTableVisible = true
      const result = await this.$api.spu.reqFindBySpuId(row.id)
      if (result.code === 200) {
        this.skuMessageList = result.data
      }
      this.dialogTitle = row.spuName
      this.loading = false
    },
    // 关闭对话框回调
    handleClose(done) {
      this.skuMessageList = []
      this.loading = true
      done()
    }
  }
}
</script>

<style>
.box-card {
  margin: 20px;
}
.item {
  margin: 4px;
}
</style>